<template>
  <div>
    <div>
      <div class="block" style="margin: 10px 0">
        单位<el-cascader
          style="margin-left: 10px; margin-right: 20px; width: 255px; "
          placeholder="请选择单位"
          ref="dwref"
          v-model="dwpath"
          @change="dwchange"
          :options="dwoptions"
          :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: true }"
          clearable>
      </el-cascader>

        井号
        <el-select v-model="jh" filterable placeholder="请输入井号" style="margin-right: 20px">
          <el-option
              v-for="item in jhs"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>

        <el-date-picker style="width: 500px; margin-right: 20px"
                        v-model="datearr"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-button type="primary" @click="load">查询</el-button>
      </div>
    </div>
    <div  ref="sshsl" id="sshsl" style="display: block; width: 1600px; height: 300px; background-color: #fbfdff;">
    </div>


  </div>

</template>

<script>
import * as echarts from 'echarts';
import service from "@/utils/request";
import ElementUI from "element-ui";
import {formatDateTime} from '@/utils/formatDateTime'

export default {
  created() {
    this.queryjh = this.$route.query.jh
    this.querydwid = this.$route.query.dwid
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            return service.get('/dw/getPathByid', {params: {id: this.querydwid}})
          }
        }
    ).then(
        response => {
          if(response.data.code == 20000){
            this.dwpath = response.data.data
            return service.get('/hsy/getjhsBydw', {params: {dwid: this.dwpath[this.dwpath.length - 1]}})
          }
        }
    ).then(
        response => {
          if (response.data.code == 20000) {
            this.jhs = response.data.data
            this.jh = this.queryjh
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
            this.datearr=[starttime,endtime]
            this.load();
          }
        }
    )

  },
  activated() {
    this.queryjh = this.$route.query.jh
    this.querydwid = this.$route.query.dwid
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            return service.get('/dw/getPathByid', {params: {id: this.querydwid}})
          }
        }
    ).then(
        response => {
          if(response.data.code == 20000){
            this.dwpath = response.data.data
            return service.get('/hsy/getjhsBydw', {params: {dwid: this.dwpath[this.dwpath.length - 1]}})
          }
        }
    ).then(
        response => {
          if (response.data.code == 20000) {
            this.jhs = response.data.data
            this.jh = this.queryjh
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
            this.datearr=[starttime,endtime]
            this.load();
          }
        }
    )
  },
  data() {
    return {
      queryjh: null,
      querydwid: null,
      jh: null,
      jhs: [],
      dwoptions: [],
      dwpath: [],
      chart_option: {
        title: {
          text: '',
          // textAlign: 'auto',
          left: 'center',
        },
        // 用dataset设置
        dataset: {
          // dimensions: [{name: 'empno', type: 'number' }, {name: 'ename' },{name: 'job' },{name: 'mgr' },{name: 'hiredate' },{name: 'sal',type: 'number' }],
          // dimensions: [ 'empno', 'ename' , 'job' ,'mgr', 'hiredate','sal', 'comm', 'deptno'],
          source: [
            // ['2020-02-01 10:10:10',100],
            // ['2020-02-01 10:12:10',20],
          ]

        },
        xAxis: {
          type: 'time',
          name: '采集时间',
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
          }

        },
        yAxis: {
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{value}%',
          }
        },

        series: [
          {
            type: 'line',
            smooth: true,
            areaStyle: {},
            encode: {
              x: 'cjsj',
              y: 'sshsl'
            },
            // label: {
            //   show: true,
            // },
            // emphasis: {
            //   label: {
            //     show: true
            //   }
            // }
          }
        ]
      },

      startdate: new Date(),
      enddate: new Date(),
      datearr: []
      // value_date: [formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss'), formatDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss')],
    }

  },
  methods: {
    dwchange(dw) {
      service.get('/hsy/getjhsBydw', {
        params: {
          dwid: dw[dw.length - 1]
        }
      }).then(
          response => {
            if (response.data.code == 20000) {
              this.jhs = response.data.data;
              this.jh = ''
            }
          }
      )
    },
    load() {
      if(this.jh == null || this.jh == '' || this.datearr == null || this.datearr.length == 0)
        return
      service.get('/hsl/gethistoryByjh', {
        params: {
          jh: this.jh,
          startdate: this.datearr[0],
          enddate: this.datearr[1],
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.chart_option.dataset.source = response.data.data
              this.showHSChart()
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },
    showHSChart(){
      let myChart = echarts.init(this.$refs.sshsl);
      this.chart_option.yAxis.name = '含水率'
      this.chart_option.yAxis.axisLabel.formatter = '{value}%'
      this.chart_option.series[0].encode =
          {
            x: 'cjsj', y: 'sshsl'
          }
      this.chart_option.title.text = this.jh+'实时含水率'
      myChart.setOption(this.chart_option);
    }
  }
}
</script>
<style scoped>
</style>
